<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加佰林の餐品</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/css/style.css">
    <script src="/common/layui/layui.js"></script>
    <script src="/common/jquery-3.3.1.min.js"></script>
    <script src="/common/vue.min.js"></script>
</head>
<body>
<div class="main" id="app">
    <div id="fixedData">
        <!--顶栏-->
        <header>
            <h1 v-text="webname"></h1>
            <div class="breadcrumb">
                <i class="layui-icon">&#xe715;</i>
                <ul>
                    <li v-for="vo in address">
                        <a v-text="vo.name" :href="vo.url"></a> <span>/</span>
                    </li>
                </ul>
            </div>
        </header>
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--右侧-->
    <div id="Right" class="right">

        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加菜品</legend>
        </fieldset>


        <form class="layui-form " action="">


            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <img class="pic_url" id="img" src="/common/image/pic.png" height="200px"/>
                    <input type="file" name="picture" id="picture">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="commodityName" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜品分类</label>
                <div class="layui-input-inline" style="width: 200px">
                    <select name="classification">
                        <option value="特价菜">特价菜</option>
                        <option value="甜品">甜品</option>
                        <option value="点心">点心</option>
                        <option value="饮品">饮品</option>
                        <option value="主菜">主菜</option>
                        <option value="招牌菜">招牌菜</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">VIP价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="vipPrice" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="stock" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否展示</label>
                <div class="layui-input-block">
                    <input type="checkbox" value="0" name="isShow" lay-text="开启|关闭" checked lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否推荐</label>
                <div class="layui-input-block">
                    <input type="checkbox" value="0" name="isRecommend" lay-text="开启|关闭" checked lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">添加商品</button>

                </div>
            </div>
        </form>


    </div>

</div>
<!-- 配置文件 -->
<script src="/common/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script src="/common/ueditor/ueditor.all.js"></script>
<script>
    let img_el = document.getElementById('img');
    let picture = document.getElementById('picture');
    let img_binery;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    function getFileName(path){
        var pos1 = path.lastIndexOf('/');
        var pos2 = path.lastIndexOf('\\');
        var pos = Math.max(pos1, pos2)
        if( pos<0 )
            return path;
        else
            return path.substring(pos+1);
    }
    picture.onchange = function(e){
        let img = picture.files[0];
        console.log(img,'img1111')
        let _url = window.URL || window.webkitURL;
        let url_s = _url.createObjectURL(img);
        img_el.src = url_s;
        var fileName = getFileName($('#picture')[0].name);
        console.log(fileName,'fileName')
        let reader = new FileReader();
        reader.onload = (e)=>{
            console.log(e,'e')
            // img_binery = e.target.result;
            img_binery =img.name;
            console.log(img_binery,'img_binery')
        };
        reader.readAsBinaryString(img);
    }

    // var ue = UE.getEditor('container');
    // setTimeout(function () {
    //     ue.setHeight(500)
    // }, 500)
    layui.use(['form', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        form.on('submit(submit)', function (data) {
            if(img_binery) {
                data.field.img = img_binery;
                $.ajax({
                    url:'/commodity/insert',
                    type:'post',
                    data:JSON.stringify(data.field),
                    contentType: "application/json;charset=UTF-8",
                    success: (data)=> {
                    if(data === 1){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('添加成功');
                    });
                    window.location.href = "/toCommodityIndex";
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('添加失败');
                    });
                }
            }
            })

            }else{
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('未上传图片');
                });
            }
            return false;
        });
    });
</script>
<script src="/admin/js/config.js"></script>
</body>
</html>
